<!-- 基础表格页面 -->
<template>
  <table-layout>
    <div class="pb-3">
      <el-button size="small" typr="primary">
        搜索
      </el-button>
    </div>
    <handle-table :data="tableData">
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="index"
        :label="item"
      />
    </handle-table>

    <div class="mt-3">
      <pagination
        v-model:size="page.size"
        v-model:current="page.current"
        :total="page.total"
        @change="page.change"
      />
    </div>
  </table-layout>
</template>

<script setup>
import HandleTable from "@/components/table/HandleTable/index.vue"
import Pagination from "@/components/table/Pagination/index.vue"
import TableLayout from "@/components/layout/TableLayout/index.vue"

import { ElMessage } from "element-plus"
import { reactive, onActivated, onMounted, ref } from "vue"
const obj = {
    partyName: "当事人姓名",
    compName: "公司名称",
    address: "地址",
    phone: "电话",
    contractDate: "合同起止",
    caseName: "关联案件",
}

const tableData = ref([])
const tableColumn = reactive({
    partyName: "当事人姓名",
    compName: "公司名称",
    address: "地址",
    phone: "电话",
    contractDate: "合同起止",
    caseName: "关联案件",
})
const page = reactive({
    size: 50,
    total: 100,
    current: 1,
    change() {},
})

for (let i = 0; i <= 30; i++) {
    tableData.value.push(obj)
}
onActivated(() => {
    ElMessage.success("表格数据修改，重新渲染表格")
})
</script>

<style lang="scss" scoped></style>
>
